<script>
import legendIcon from "./legendIcon.vue";
import legendText from "./legendText.vue";
import position from "./positon.vue";
export default {
  name: "Legend",
  components: {
    legendIcon,
    legendText,
    position,
  },
  inject: ["father"],
  data() {
    return {
      activeName: "1",
      options: [
        {
          title: "图标",
          name: "1",
          render: () => <legendIcon />,
        },
        {
          title: "文本",
          name: "2",
          render: () => <legendText />,
        },
        {
          title: "定位",
          name: "3",
          render: () => <position />,
        },
      ],
    };
  },
  computed: {
    legend: {
      get() {
        return this.father.echartsOptions.legend;
      },
      set(val) {
        this.father.echartsOptions.legend = val;
      },
    },
  },
  mounted() {},
  methods: {},
  render() {
    return (
      <div>
        <el-form-item label="显示">
          <el-switch v-model={this.legend.show}></el-switch>
        </el-form-item>
        <el-form-item label="图例类型">
          <el-radio-group v-model={this.legend.type}>
            <el-radio-button label="plain">普通图例</el-radio-button>
            <el-radio-button label="scroll">滚动图例</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图例间隔">
          <el-input-number
            step={1}
            max={99}
            min={0}
            v-model={this.legend.itemGap}
          ></el-input-number>
        </el-form-item>
        <el-form-item label="布局朝向">
          <el-radio-group v-model={this.legend.orient}>
            <el-radio-button label="horizontal">横向</el-radio-button>
            <el-radio-button label="vertical">纵向</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-collapse v-model={this.activeName} accordion>
          {this.options.map((item) => {
            return (
              <el-collapse-item title={item.title} name={item.name}>
                {item.render()}
              </el-collapse-item>
            );
          })}
        </el-collapse>
      </div>
    );
  },
};
</script>

<style scoped>
</style>